<template>
	<div class="row" v-if="scheduleInfo" v-loading="editLoading">
    <div class="fx-con mar-lr-5">
        <div class="match-place border-radius-5 border-green fx-con mar-lr-5">{{scheduleInfo.matchPlaceName}}</div>
        <div class="match-code border-radius-5 border-green fx-con mar-lr-5">{{scheduleInfo.matchCode}}</div>
        <div class="pad-5 border-radius-5 border-green fx-con fx-item mar-lr-5">{{scheduleInfo.scheduleName}}</div>
				<a :href="'/#/score?matchId='+scheduleInfo.matchId" target="_blank">
					<el-button type="button" class="btn btn-default mar-lr-5">扩展</el-button>
				</a>
				<el-select v-model="scheduleInfo.psEntry" placeholder="选择章节" style="width:110px">
					<el-option v-for="item in chapterList" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
        <el-button type="button" class="btn btn-default mar-lr-5" @click="updateMatchSchedule('psEntry')">推送</el-button>
    </div>
    <div class="fx-con mar-lr-5 mar-t-30">
        <div class="player-con fx-item">
            <div class="fx-con">
                <input class="pad-5 fx-item border-radius-5 border-blue mar-lr-5 text-center" type="text" placeholder="Default input" v-model="scheduleInfo.blueTeam" readonly="">
                <input class="pad-5 fx-item border-radius-5 border-blue mar-lr-5 text-center" type="text" placeholder="Default input" v-model="scheduleInfo.bluePlayer" id="bulePlayer">
                <el-button type="button" class="btn btn-default mar-lr-5" @click="updateMatchSchedule('bulePlayer')">修正</el-button>
            </div>
        </div>
        <div class="schedule-select-con">
            <div class="fx-con">
                <el-button type="button" class="btn btn-default mar-lr-5" @click="changeSchedule('prev')" style="padding: 10px 5px;">
                  <i class="el-icon-arrow-up"></i>
                </el-button>
                <el-select v-model="scheduleInfo.id" placeholder="请选择" style="width:100px">
									<el-option v-for="item in scheduleList" :key="item.id" :label="item.matchCode" :value="item.id"></el-option>
								</el-select>
								<el-button type="button" class="btn btn-default mar-lr-5"  @click="changeSchedule('next')" style="padding: 10px 5px;">
                  <i class="el-icon-arrow-down"></i>
                </el-button>
            </div>
            <div class="fx-con mar-t-10">
                <el-button type="button" class="btn btn-default btn-block mar-lr-5" style="width:50%" @click="flushInfo">刷新</el-button>
								<el-button v-if="scheduleInfo.isLocked==1" type="button" class="btn btn-default btn-block mar-lr-5" style="width:50%" @click="unjumpToSchedule(scheduleInfo.lockId)">解锁</el-button>
								<el-button v-else type="button" class="btn btn-default btn-block mar-lr-5" style="width:50%" @click="jumpToSchedule(scheduleInfo.matchId, scheduleInfo.id)">锁定</el-button>
            </div>
        </div>
    </div>
    <div class="fx-con mar-lr-5 mar-t-30" v-if="scheduleInfo.twoTime">
      <div class="score-con fx-item">
        <div class="ctrl-con mar-lr-10">
          <div v-if=scheduleInfo.lockTwoTime>
            <div class="common-tab" @click="twoTime(0,scheduleInfo.lockId)" style="width: 48%;text-align:center;color: #f0f0f0; background: #a8a9a9">1</div>
            <div class="common-tab" @click="twoTime(1,scheduleInfo.lockId)" style="width: 48%;text-align:center; color: #f0f0f0; background: #5daf34" >2</div>
          </div>
          <div v-else>
            <div class="common-tab" @click="twoTime(0,scheduleInfo.lockId)" style="width: 48%;text-align:center;color: #f0f0f0; background: #5daf34">1</div>
            <div class="common-tab" @click="twoTime(1,scheduleInfo.lockId)" style="width: 48%;text-align:center; color: #f0f0f0;background: #a8a9a9" >2</div>
          </div>
        </div>
      </div>
    </div>
    <div class="fx-con mar-lr-5 mar-t-30">
        <div class="score-con fx-item">
            <div class="fx-con">
                <input class="pad-5 fx-item border-radius-5 border-green mar-lr-5 text-center" type="number" placeholder="准确度" id="accuracy" v-model="scheduleInfo.accuracyScore">
                <input class="pad-5 fx-item border-radius-5 border-green mar-lr-5 text-center" type="number" placeholder="表现力" id="expressiveness" v-model="scheduleInfo.expressivenessScore">
                <input class="pad-5 fx-item border-radius-5 border-green mar-lr-5 text-center" type="number" placeholder="总分" id="totalScore" v-model="scheduleInfo.totalScore" readonly="">
                <el-button type="button" class="btn btn-default mar-lr-5"  @click="updateMatchSchedule('singleScore')">修正</el-button>
            </div>
            <div class="mar-t-10 mar-lr-5 table-responsive">
              <el-table ref="singleTable" :data="scheduleScoreList" style="width: 100%">
								<el-table-column type="index" width="50"></el-table-column>
								<el-table-column property="id" align="center" label="成绩编号" width="120"></el-table-column>
								<el-table-column property="referee" align="center" label="裁判ID" width="120"></el-table-column>
								<!-- <el-table-column property="name" align="center" label="状态" width="120"> </el-table-column> -->
								<el-table-column property="name" align="center" label="成绩" width="120">
									<template slot-scope="scope">
										<el-tag type="danger">{{scope.row.accuracy}} | {{scope.row.expressiveness}}</el-tag>
									</template>
								</el-table-column>
								<el-table-column property="name" align="center" label="测试" width="120">
                  <template slot-scope="scope">
										<el-button type="primary" size="mini" @click="checkReferee(scope.row.referee)">测试</el-button>
									</template>
                </el-table-column>
								<el-table-column property="name" align="center" label="操作">
									<template slot-scope="scope">
										<el-button type="danger" size="mini" @click="delectScore(scope.row.id)">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
            </div>
        </div>
        <div class="ctrl-con mar-lr-5">
            <input class="pad-5 border-radius-5 border-green text-center block" type="text" placeholder="计时" id="count-down" value="01:30" readonly="">
            <el-button type="button" v-if="!isCountdown" id="time-start" class="btn btn-default btn-block mar-t-10" @click="startMatch" style="width:100%;margin-left:0">开始</el-button>
            <el-button type="button" v-else class="btn btn-default btn-block mar-t-10" @click="clearInt" style="width:100%;margin-left:0">结束</el-button>
						<el-button type="button" class="btn btn-default btn-block mar-t-10" @click="commitScore()" style="width:100%;margin-left:0">确认比分</el-button>
						<el-button type="button" class="btn btn-default btn-block mar-t-10" @click="showScore()" style="width:100%;margin-left:0">公布成绩</el-button>
						<el-button type="button" class="btn btn-default btn-block mar-t-10" @click="showRanking()" style="width:100%;margin-left:0">公布排名</el-button>
        </div>
    </div>
</div>
</template>
<script>
import { getScheduleInfo, getMatchScoreList, updateTeamAndName, updatepPsEntry, updateScore, showScore, showRanking, checkReferee } from '@/api/matchSchedule'
import { delectScore } from '@/api/matchScore'
import { showMsg } from '@/utils'
import { lock } from '@/api/matchScheduleLocked'
import { unLocked } from '@/api/matchScheduleLocked'
import { setTwoTime } from '@/api/matchScheduleLocked'
export default {
  props: {
    scheduleId: {
      type: Number,
      default: 0
    },
    scheduleList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      editLoading: true,
      chapterList: [
        { value: '太极一章', label: '太极一章' },
        { value: '太极二章', label: '太极二章' },
        { value: '太极三章', label: '太极三章' },
        { value: '太极四章', label: '太极四章' },
        { value: '太极五章', label: '太极五章' },
        { value: '太极六章', label: '太极六章' },
        { value: '太极七章', label: '太极七章' },
        { value: '太极八章', label: '太极八章' },
        { value: '高丽', label: '高丽' },
        { value: '金刚', label: '金刚' },
        { value: '太白', label: '太白' },
        { value: '平原', label: '平原' },
        { value: '十进', label: '十进' },
        { value: '地跆', label: '地跆' },
        { value: '天拳', label: '天拳' },
        { value: '汉水', label: '汉水' },
        { value: '一如', label: '一如' },
        { value: '自创品势', label: '自创品势' }
      ],
      scheduleInfo: {
        accuracyScore: null,
        expressivenessScore: null
      },
      scheduleScoreList: null,
      countdownStr: '01:30',
      isCountdown: false,
      int: null
    }
  },
  created() {
    this.getScheduleInfo()
    this.getMatchScoreList()
  },
  watch: {
    newValue(val, oldVal) {
      this.scheduleInfo.totalScore = Number(this.scheduleInfo.accuracyScore) + Number(this.scheduleInfo.expressivenessScore)
    },
    newValue2(val, oldVal) {
      this.scheduleInfo.totalScore = Number(this.scheduleInfo.accuracyScore) + Number(this.scheduleInfo.expressivenessScore)
    }
  },
  computed: {
    newValue() {
      return this.scheduleInfo.accuracyScore
    },
    newValue2() {
      return this.scheduleInfo.expressivenessScore
    }
  },
  methods: {
    changeSchedule(arg) {
      for (var i in this.scheduleList) {
        if (this.scheduleList[i].id === this.scheduleInfo.id) {
          if (arg === 'prev' && Number(i) > 0) {
            this.scheduleInfo.id = this.scheduleList[Number(i) - 1].id
            return true
          }
          if (arg === 'next' && Number(i) < this.scheduleList.length - 1) {
            this.scheduleInfo.id = this.scheduleList[Number(i) + 1].id
            return true
          }
        }
      }
    },
    jumpToSchedule(matchId, matchScheduleId) {
      var obj = {
        matchId: matchId,
        matchAdminId: this.$store.state.user.matchAdminId,
        matchScheduleId: matchScheduleId
      }
      lock(obj).then(res => {
        if (res.data.code === 0) {
          showMsg(res.data.message, 1)
        } else {
          showMsg(res.data.message, 2)
        }
        this.flushInfo()
      })
    },
    unjumpToSchedule(lockId) {
      var obj = []
      obj.push(lockId)
      unLocked(obj).then(res => {
        if (res.data.code === 0) {
          showMsg(res.data.message, 1)
        } else {
          showMsg(res.data.message, 2)
        }
        this.flushInfo()
      })
    },
    twoTime(twoTime, lockId) {
      if (lockId === 0) {
        showMsg('该场次未锁定，不能跳转。', 2)
        return
      }
      var obj = {
        id: lockId,
        twoTime: twoTime
      }
      setTwoTime(obj).then(res => {
        if (res.data.code === 0) {
          showMsg(res.data.message, 1)
        } else {
          showMsg(res.data.message, 2)
        }
        this.flushInfo()
      })
    },
    delectScore(scoreId) {
      var obj = {
        scoreIds: [scoreId]
      }
      delectScore(obj).then(res => {
        if (res.data.code === 0) {
          showMsg(res.data.message, 1)
        } else {
          showMsg(res.data.message, 2)
        }
      })
    },
    checkReferee(refereeId) {
      var obj = {
        'refereeId': refereeId
      }
      checkReferee(obj).then(res => {
        if (res.data.code === 0) {
          showMsg(res.data.message, 1)
        } else {
          showMsg(res.data.message, 2)
        }
      })
    },
    updateMatchSchedule(type) {
      this.editLoading = true
      switch (type) {
        case 'psEntry':
          var obj = {
            matchScheduleId: this.scheduleInfo.id,
            psEntry: this.scheduleInfo.psEntry.toString()
          }
          updatepPsEntry(obj).then(res => {
            this.editLoading = false
            if (res.data.code === 0) {
              showMsg(res.data.message, 1)
            } else {
              showMsg(res.data.message, 2)
            }
          })
          break
        case 'bulePlayer':
          var obj2 = {
            id: this.scheduleInfo.id,
            blueTeam: this.scheduleInfo.blueTeam === null ? '' : this.scheduleInfo.blueTeam,
            bluePlayer: this.scheduleInfo.bluePlayer === null ? '' : this.scheduleInfo.bluePlayer,
            redTeam: this.scheduleInfo.redTeam === null ? '' : this.scheduleInfo.redTeam,
            redPlayer: this.scheduleInfo.redPlayer === null ? '' : this.scheduleInfo.redPlayer
          }
          updateTeamAndName(obj2).then(res => {
            this.editLoading = false
            if (res.data.code === 0) {
              showMsg(res.data.message, 1)
            } else {
              showMsg(res.data.message, 2)
            }
          })
          break
        case 'singleScore':
          var obj3 = {
            id: this.scheduleInfo.id,
            expressivenessScore: this.scheduleInfo.expressivenessScore === null ? 0 : this.scheduleInfo.expressivenessScore,
            accuracyScore: this.scheduleInfo.accuracyScore === null ? 0 : this.scheduleInfo.accuracyScore,
            totalScore: this.scheduleInfo.totalScore === null ? 0 : this.scheduleInfo.totalScore
          }
          updateScore(obj3).then(res => {
            this.editLoading = false
            if (res.data.code === 0) {
              showMsg(res.data.message, 1)
            } else {
              showMsg(res.data.message, 2)
            }
          })
          break
      }
    },
    showScore() {
      showScore({ matchScheduleId: this.scheduleInfo.id }).then(res => {
        if (res.data.code === 0) {
          showMsg(res.data.message, 1)
        } else {
          showMsg(res.data.message, 2)
        }
      })
    },
    showRanking() {
      showRanking({ matchScheduleId: this.scheduleInfo.id }).then(res => {
        if (res.data.code === 0) {
          showMsg(res.data.message, 1)
        } else {
          showMsg(res.data.message, 2)
        }
      })
    },
    flushInfo() {
      // this.scheduleId = this.scheduleInfo.id
      this.editLoading = true
      this.$emit('update:scheduleId', this.scheduleInfo.id)
      getScheduleInfo({ matchScheduleId: this.scheduleInfo.id }).then(res => {
        this.editLoading = false
        this.scheduleInfo = res.data.data
      })
    },
    getScheduleInfo() {
      getScheduleInfo({ matchScheduleId: this.scheduleId }).then(res => {
        this.editLoading = false
        this.scheduleInfo = res.data.data
      })
    },
    getMatchScoreList() {
      getMatchScoreList({ matchScheduleId: this.scheduleId }).then(res => {
        this.scheduleScoreList = res.data.data
      })
    },
    startMatch() {
      this.countdown(89)
    },
    clearInt() {
      window.clearInterval(this.int)
      this.isCountdown = false
      document.getElementById('count-down').value = '01:30'
    },
    countdown(sec) {
      this.isCountdown = true
      var that = this
      var hour = 0
      var minute = 0
      var second = 0
      that.int = setInterval(function() {
        if (sec >= 60) {
          minute = Math.floor(sec / 60)
          second = sec % 60
          if (minute >= 60) {
            hour = Math.floor(minute / 60)
            minute = minute % 60
          } else {
            hour = 0
          }
        } else {
          second = sec
          hour = 0
          minute = 0
        }

        hour = parseInt(hour) < 10 ? '0' + hour : hour
        minute = parseInt(minute) < 10 ? '0' + minute : minute
        second = parseInt(second) < 10 ? '0' + second : second
        that.countdownStr = minute + ':' + second
        sec--
        console.log(that.countdownStr)
        document.getElementById('count-down').value = that.countdownStr
        if (sec < 0) {
          that.isCountdown = false
          document.getElementById('count-down').value = '0:30'
          clearInterval(that.int)
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
    .btn-block+.btn-block {
        margin-top: 0;
    }
    .inline-block {
        display: inline-block;
    }
    .block {
        display: block;
    }
    .fx-con {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .mar-lr-5 {
        margin-right: 5px;
        margin-left: 5px;
    }
    .mar-t-10 {
        margin-top: 10px !important;
    }
    .mar-t-30 {
        margin-top: 30px;
    }
    .pad-5 {
        padding: 5px;
    }
    .fx-item {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }
    .fx-grow {
        flex-grow: 1;
    }
    .fx-shrink {
        flex-shrink: 1;
    }
    .fx-align-c {
        align-items: center;
    }
    .fx-justify-c {
        justify-content: center;
    }
    .fx-justify-sb {
        justify-content: space-between;
    }
    .border-radius-5 {
        border-radius: 5px;
    }
    .border-green {
        border: 2px solid mediumseagreen;
    }
    .border-blue {
        border: 2px solid #3982ff;
    }
    .border-red {
        border: 2px solid #db3d35;
    }
    .match-place {
        width: 70px;
        height: 50px;
        font-size: 20px;
        font-weight: bold;
    }
    .match-code {
        width: 70px;
        height: 50px;
        font-size: 16px;
        font-weight: bold;
    }
    .match-level {
        padding: 5px;
    }
    .psEntry {
        width: 120px;
    }
    /* .player-con {

    } */
    .player-name {
        padding: 5px;
    }
    .player-team {
        padding: 5px;
    }
    /* .schedule-select-con {

    }
    .score-con {

    } */
    .ctrl-con {
        width: 120px;
    }
    #count-down {
        font-weight: bold;
        font-size: 20px;
        line-height: 1;
        width: 100%;
        height: 34px;
    }
    .referee-point {
        padding: 2px 5px;
        border:1px solid cornflowerblue;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
    }
  .common-tab{
    display: inline-block;
    vertical-align: middle;
  }

    .box-center {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;

    }


</style>
